@prefix-select: ~'@{nameSpace}-select';

.@{prefix-select} {
  color: var(--design-neutral-color-2);
  position: relative;
  font-size: var(--design-font-size-base);

  .@{prefix-select}-main {
    background-color: rgba(var(--design-rgba-distant), 0.02);
    color: var(--design-text-color-5);
    border-radius: var(--design-border-radius-base);
    border: var(--design-border-color-2) solid var(--design-border-sm);
    min-width: 120px;
    height: 40px;
    gap: 10px;
    .flex();
    .justify-between();
    .cursor-pointer();



    .@{prefix-select}-placeholder {
      margin-left: 12px;
      color: var(--design-neutral-color-3);
      .flex();
      .align-center();
    }

    .@{prefix-select}-value {
      margin-left: 12px;
      .flex();
      .align-center();
    }

    .@{prefix-select}-values {
      .flex();
      .align-center();
    }

    .@{prefix-select}-icon {
      margin-right: 12px;
      .flex();
      .align-center();
    }
  }

  .@{prefix-select}-multiple-values {
    font-size: var(--design-font-size-sm);
    overflow: auto;
    flex: 1;
    .flex();
    padding-left: 4px;
    padding-right: 4px;
    gap: 4px;
    color: var(--design-text-color-5);

    .@{prefix-select}-multiple-values-item {
      .flex();
      .justify-between();
      .align-center();
      gap: 12px;
      background-color: var(--design-base-color-5);
      border-radius: var(--design-border-radius-base);
      padding: 0 6px;
      flex-wrap: nowrap;
      margin: 4px 0;
    }
  }

  .@{prefix-select}-main-border {
    border-color: var(--design-base-color);
  }

  .@{prefix-select}-options-centent {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    background-color: var(--design-bg-color-4);
    .design-shadow-sm();
    z-index: 1000;

    .@{prefix-select}-options {
      border: var(--design-border-color-2) solid var(--design-border-sm);
      .cursor-pointer();

      .@{prefix-select}-option {
        height: 40px;
        padding: 0 24px;
        .flex();
        .align-center();

        &:hover {
          background-color: var(--design-bg-color-3);
        }
      }

      .@{prefix-select}-option-selected {
        color: var(--design-base-color-10);
        background-color: var(--design-base-color-3) !important;
      }

    }

    .@{prefix-select}-options-overflow-5 {
      max-height: 240px;
      overflow: auto;
      .scrollbar();
    }
  }
}